<script setup lang="ts">
import { ref, watch } from 'vue'
const props = defineProps({
  current: {
    type: Number,
    required: true,
    default: 1,
  },
  totalPage: {
    type: Number,
    required: true,
    default: 0,
  },
  pageChange: {
    type: Function,
    required: true,
  },
})
const toPage = (i: number) => {
  if (i === props.current) return
  let page = i
  if (i < 0) page = 1
  if (i > props.totalPage) page = props.totalPage
  props.pageChange(page)
}
const timer = ref()
const currentPage = ref(1)
watch(
  () => currentPage.value,
  () => {
    if (currentPage.value) {
      clearTimeout(timer.value)
      timer.value = setTimeout(() => {
        const page = +currentPage.value
        toPage(page)
      }, 500)
    }
  },
)
watch(
  () => props.current,
  () => {
    currentPage.value = props.current
  },
)
</script>

<template>
  <div class="pdf-pager">
    <span class="first" @click="toPage(1)" title="首页" />
    <span class="back" @click="toPage(current - 2 < 1 ? 1 : current - 2)" title="前两页" />
    <span class="previous" @click="toPage(current - 1 < 1 ? 1 : current - 1)" title="上一页" />
    <span class="input">
      <el-input v-model="currentPage" />
    </span>
    <span class="total"> / {{ totalPage }}</span>
    <span
      class="next"
      @click="toPage(current + 1 > totalPage ? totalPage : current + 1)"
      title="下一页"
    />
    <span
      class="forward"
      @click="toPage(current + 2 > totalPage ? totalPage : current + 2)"
      title="后两页"
    />
    <span class="last" @click="toPage(totalPage)" title="末页" />
  </div>
</template>

<style lang="scss" scoped>
.pdf-pager {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;

  span {
    height: 16px;
    min-width: 16px;
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
    transition: background-image 0.3s;
    &.first {
      background-image: url('@/assets/images/04_first_icon_01.png');

      &:hover {
        background-image: url('@/assets/images/04_first_icon_02.png');
      }
    }

    &.back {
      background-image: url('@/assets/images/04_back-icon_01.png');

      &:hover {
        background-image: url('@/assets/images/04_back-icon_02.png');
      }
    }

    &.previous {
      background-image: url('@/assets/images/04_predef-icon_01.png');

      &:hover {
        background-image: url('@/assets/images/04_prehover-icon_02.png');
      }
    }

    &.input {
      cursor: default;
      min-width: 36px;
      height: 24px;
      margin-right: 8px;

      .el-input {
        height: 24px;
        width: 52px;
        font-size: 14px;
        color: #5c718a;
        :deep(.el-input__wrapper) {
          height: 24px;
          width: 52px;

          .el-input__inner {
            text-align: center;
          }
        }
      }
    }

    &.total {
      cursor: default;
      min-width: 27px;
      height: 20px;
      font-family: MicrosoftYaHei;
      font-size: 14px;
      color: #5c718a;
      white-space: nowrap;
    }

    &.next {
      background-image: url('@/assets/images/04_nextdef-icon_01.png');

      &:hover {
        background-image: url('@/assets/images/04_nexthover-icon_02.png');
      }
    }

    &.forward {
      background-image: url('@/assets/images/04_forward-icon_01.png');

      &:hover {
        background-image: url('@/assets/images/04_forward-icon_02.png');
      }
    }

    &.last {
      background-image: url('@/assets/images/04_last-icon_01.png');

      &:hover {
        background-image: url('@/assets/images/04_last-icon_02.png');
      }
    }
  }
}
</style>
